<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>门店投币</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../css/timecheck.css" />
  <link rel="stylesheet" href="../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
    }
    #app{
      padding-bottom: 0.35rem;
    }
    p{
      margin: 0;
      font-size: 0.24rem;
    }
    .deviceData{
      width: 100%;
      text-align: center;
      padding: 0.2rem 0;
      border-bottom: 1px solid #BBBBBB;
      background-color: white;

    }
    .deviceData p:first-child{
      font-size: 0.28rem;
      color:black;
    }
    .deviceData p:last-child{
      font-size: 0.22rem;
    }
    .device{
      background-color: white;
      overflow: hidden;
      padding: 0.1rem 0;
    }
    .device p{
      float: left;
      font-size: 0.2rem;
    }
    .chooseDiv{
      width: 100%;
      overflow: hidden;
      padding: 0.2rem 0;
    }
    .chooseDiv p{
      float: left;
      width: 35%;
      padding: 0.1rem 0;
      text-align: center;
      background-color: #DFDFDF;
      font-size: 0.22rem;
    }
    .chooseDiv p:first-child{
      margin-left: 15%;

    }
    .chooseDiv .default{
      background-color: white;
    }
    .saleData{
      width: 100%;
      background-color: white;
      border-top: 1px solid white;
      padding-bottom: 0.2rem;
    }
    .table{
      width: 90%;
      margin: 0.2rem auto 0;
      background-color: #F9F9F9;
      border-radius: 0.2rem;
      padding:  0.2rem;
      overflow: hidden;
      clear: both;
    }
    .table p{
      font-size: 0.22rem;
    }
    .table p:first-child{
      font-size: 0.24rem;
      color:black;
    }
    .table p:nth-child(2), .table p:last-child{
      float: left;
      width: 2rem;
    }
    .myTable{
      width: 100%;
      font-size: 0.24rem;
      text-align: center;
      /*background-color: white;*/
    }
    .myTable td{
      padding: 0.15rem 0;
      font-size: 0.2rem;
    }
    .myTable td p{
      font-size: 0.2rem;
      margin: 0;
    }
    .footer{
      width: 100%;
      position: fixed;
      bottom:0;
      background-color: #F9F9F9;
      display: flex;
      justify-content:space-between;
      align-items:center;
      padding: 0.2rem 0;
    }
    .dayChoose{
      width: 5rem;
      /*background-color: #2ac845;*/
    }
    .dayChoose div{
      width: 50%;
      float: left;
      text-align: center;
      border: 1px solid #e6e6e6;
      padding: 0.1rem 0;
      font-size: 0.24rem;
    }

    .mui-scroll-wrapper {
      bottom:1rem;
    }
    .mui-scroll {
      touch-action: none;
    }
    .bglight {
      background-color: #FFFFFF;
    }
    .gary{
      color: rgba(128, 128, 128, 0.6);
    }
  </style>
</head>

<body>
<script src="../js/echarts.common.min.js" ></script>
<script src="../js/vue.min.js" ></script>
<script src="../config.js" ></script>
<script src="../common/timeCheck2.js" ></script>
<script src="../js/mui.min.js"></script>
<div id="app" class="mui-content"  >
  <div class="mui-scroll-wrapper">
    <div class="mui-scroll">
      <div class="deviceData">
        <p>{{deviceName}}</p>
        <p>SN:{{deviceSn}}</p>
      </div>
      <div class="device">
        <img v-show="deviceState === 1" style="width: 0.2rem;  float: left; margin: 0.06rem 0.1rem 0" src="../images/troubleflag-green.png" alt="">
        <img v-show="deviceState === 0" style="width: 0.2rem;  float: left; margin: 0.06rem 0.1rem 0" src="../images/troubleflag-gray.png" alt="">
        <p style="vertical-align:middle;" >{{deviceState === 1 ?'设备正常' : '设备掉线'}}</p>
        <p style="float: right;margin-right: 0.2rem">查询周期内最后抄表：{{new Date(lastTime).format('yyyy-MM-dd hh:mm')}}</p>
      </div>
      <div class="chooseDiv">
        <p :class="{default:chooseType ===1}" @click="choose(1)"> 销售数据 </p>
        <p :class="{default:chooseType ===2}" @click="choose(2)"> 抄表日志 </p>
      </div>
      <!--销售数据-->
      <div class="saleData" v-show="chooseType === 1">
        <div class="table" v-for="(item,index) in originalData">
          <p> <strong>{{item.name}}</strong> </p>
          <p>收入：{{(item.money/100).toFixed(2)}}元</p>
          <p>应出：{{item.shouldCoin}}币</p>
        </div>

      </div>
      <!--抄表日志-->
      <div v-show="chooseType === 2" style="position: relative;padding-bottom: 2rem">
        <table  class="myTable"   >
          <tr style="background-color: #FFFFFF;">
            <td>抄表时间</td>
            <td>收入增量</td>
            <td>出币增量</td>
            <td>抄表结果</td>
          </tr>
          <tr v-for="(item,index) in logList" :class="{bglight:index%2===1}" :style="{color:colorFun(item.state,0)}">
            <td>
              <span style="display: block">{{ new Date(item.date).format('yyyy-MM-dd') }}</span>
              <span style="display: block">{{ new Date(item.date).format('hh:mm:ss') }}</span>
            </td>
            <td>{{(item.money).toFixed(2) }}</td>
            <td>{{item.coin}}枚</td>
            <td :style="{color:colorFun(item.state,1)}">{{ state(item.state) }}</td>
          </tr>
        </table>
        <p v-show="logList.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
          暂无数据
        </p>
      </div>
    </div>
  </div>
  <!--加载中-->
  <div class="mui-pull-bottom-pocket" v-show='isLoading'>
    <div class="mui-pull" >
      {{loadingText}}
    </div>
  </div>
  <div class="footer" v-show="chooseType === 2">
    <img @click="lastDayFun" style="width: 0.6rem" src="../images/lastDay .png"  alt="">
    <div class="dayChoose">
      <div @click="lastDayFun" :class="{gary: new Date(chooseTime).format('yyyyMMdd') === new Date(fromDate).format('yyyyMMdd')} ">
        前一日
      </div>
      <div @click="nextDayFun" :class="{gary: new Date(chooseTime).format('yyyyMMdd') === new Date(toDate).format('yyyyMMdd')} ">
        后一日
      </div>
    </div>
    <img  @click="nextDayFun" style="width: 0.6rem" src="../images/nextDay.png" alt="">
  </div>

</div>
<script type="text/javascript">
  mui.init();
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        actnum:'',
        fromDate:'',
        toDate:'',
        dateType:'',
        chooseType:1,
        lastTime:'',   //最后抄表时间
        deviceSn:'',
        deviceName:'',
        deviceState:'',   //0 离线  1正常
        originalData:'',
        chooseTime:'',  //选择抄表日志的时间
        logList:[{"date":1551369623781,"money":0,"coin":0,"state":2},{"date":1551403845903,"money":0,"coin":0,"state":1},{"date":1551405650896,"money":0,"coin":0,"state":1},{"date":1551407442767,"money":0,"coin":0,"state":1},{"date":1551409244331,"money":20,"coin":20,"state":1},{"date":1551411045980,"money":80,"coin":80,"state":1},{"date":1551412847324,"money":12,"coin":12,"state":1},{"date":1551414649139,"money":0,"coin":0,"state":1},{"date":1551416450544,"money":15,"coin":15,"state":1},{"date":1551418242601,"money":110,"coin":110,"state":1}]
    ,   //抄表日志列表
        isLoading:true,
        pageSize:50,
        totalPage:1,
        pageNo:1,
        loadingText:'4458'

      }
    },
    created:function() {
      mui.plusReady(function(){
        vm.receiveParams();
        vm.bindEvent();
      });

    },
    mounted: function() {
    },
    methods: {
//获取上个页面的信息fun
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.storeId = sf.storeId
        this.storeName = sf.storeName
        this.toDate = sf.toDate
        this.fromDate = sf.fromDate
        this.actnum  = sf.actnum
        this.dateType  = sf.dateType
        this.lastTime  = sf.lastTime
        this.deviceSn  = sf.deviceSn
        this.deviceState  = sf.deviceState
        this.deviceName  = sf.deviceName
        this.localData()
      },
      choose:function(type){
        if(this.chooseType !== type){
          this.chooseType=type
        }
      },
      localData:function(){
        console.log('ATMDetail')
        var vm=this;
        config.ajax({
          url:'/atmReport/getAtmSale',
          data:{
            "fromDate":new Date(vm.fromDate).format('yyyyMMdd'),
            "toDate":new Date(vm.toDate).format('yyyyMMdd'),
            "storeId":vm.storeId,
            "deviceSn":vm.deviceSn
          },
          success:function(res){
            if(res.result===1){
              vm.originalData=res.data;
              vm.chooseTime= new Date(vm.fromDate).getTime() ;
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      geiLogList:function(){
        var vm=this;
        vm.isLoading=true;
        var data={
          "toDate":new Date(vm.chooseTime).format('yyyyMMdd'),
          "storeId":vm.storeId,
          "deviceSn":vm.deviceSn,
          page:vm.pageNo,
          pageSize:vm.pageSize,
        };
        config.ajax({
          url:'/atmReport/getAtmLog',
          data:{
            "toDate":new Date(vm.chooseTime).format('yyyyMMdd'),
            "storeId":vm.storeId,
            "deviceSn":vm.deviceSn,
            page:vm.pageNo,
            pageSize:vm.pageSize,
          },
          success:function(res){
            console.log(JSON.stringify(res))
            if(res.result===1){
              if (vm.pageNo === 1) {
                mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 500);
                vm.logList=res.data.atmList.data;
              } else {
                vm.logList = vm.logList.concat(res.data.atmList.data)
              }
              vm.pageNo= Number(res.data.page);
              vm.totalPage= Math.ceil(res.data.atmList.total/vm.pageSize);
            }else{
              mui.toast(res.errormsg)
            }
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          },
          error:function(res){
            mui.toast(res.errormsg)
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          }
        })
      },
      bindEvent: function () {
        var vm = this
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
        //滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function (e) {
          if(vm.chooseType === 2){
            if (e.detail.y <= e.detail.maxScrollY) {
              if (vm.isLoading === false) {
                if (++vm.pageNo <= vm.totalPage) {
                  vm.loadingText = '加载中...'
                  vm.geiLogList()
                } else {
                  vm.loadingText = '没有更多'
                  mui.toast('没有更多')
                }
              }
            }
          }

        });

//        //监听键盘事件
        window.onresize = function () {
          mui('.mui-scroll-wrapper').scroll().element.scrollTop = 0;
        }
      },
      state:function(state){
        switch (state){
          case 0:
            return '离线'
            break;
          case 1:
            return '成功'
            break;
          case 2:
            return '离线'
            break;
          case 3:
            return '失败'
            break;
          case 4:
            return '修复'
            break;
        }
      },
      nextDayFun:function(){
        if( new Date(vm.chooseTime).format('yyyyMMdd')  !== new Date(vm.toDate).format('yyyyMMdd')){
          vm.chooseTime=vm.chooseTime+24*60*60*1000
        }
      },
      lastDayFun:function(){
        var  vm=this;
        if( new Date(vm.chooseTime).format('yyyyMMdd')  !== new Date(vm.fromDate).format('yyyyMMdd')){
          vm.chooseTime=vm.chooseTime-24*60*60*1000
        }
      },
      colorFun:function(state,type){
        if(type ===0){
          switch (state){
            case 0:
              return '#BBBBBB'
              break;
            case 1:
              return 'black'
              break;
            case 2:
              return '#BBBBBB'
              break;
            case 3:
              return '#BBBBBB'
              break;
            case 4:
              return  'black'
              break;
          }
        }else{
          switch (state){
            case 0:
              return '#BBBBBB'
              break;
            case 1:
              return 'black'
              break;
            case 2:
              return '#BBBBBB'
              break;
            case 3:
              return 'red'
              break;
            case 4:
              return  'black'
              break;
          }
        }

      }

    },
    watch: {
      chooseTime: function() {
          this.pageNo=1
          this.geiLogList()
      },
    }
  })
</script>
</body>

</html>